<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // 受控组件：在React中，表单元素(input select textarea等)被React以setState的方式驱动视图变化的元素就称为受控组件。每一个受控组件都维护自己的state数据，当输入内容发生变化时，对应的state也会随之更新。
      class App extends React.Component {
        state = {
          username: "",
          desc: "",
          sele: "coconut",
          sex: "man",
        };
        textChange(e) {
          let value = e.target.value;
          this.setState({
            username: value,
          });
        }
        areaChange(e) {
          this.setState({
            desc: e.target.value,
          });
        }
        selectChange(e) {
          this.setState({
            sele: e.target.value,
          });
        }
        radioChange(e) {
          this.setState({
            sex: e.target.value,
          });
        }
        render() {
          const { username, desc, sele, sex } = this.state;
          return (
            <div className="root">
              <p>输入的姓名: {username}</p>
              姓名:
              <input
                type="text"
                value={username}
                onChange={this.textChange.bind(this)}
              />
              <hr />
              <p>输入的简介: {desc}</p>
              <textarea
                cols="30"
                rows="10"
                value={desc}
                onChange={this.areaChange.bind(this)}
              ></textarea>
              <hr />
              <p>选择的水果:{sele}</p>
              <select value={sele} onChange={this.selectChange.bind(this)}>
                <option value="grapefruit">葡萄柚</option>
                <option value="lime">酸橙</option>
                <option selected value="coconut">
                  椰子
                </option>
                <option value="mango">芒果</option>
              </select>
              <hr />
              <p>选择性别:{sex}</p>
              <input
                type="radio"
                name="sex"
                value="man"
                defaultChecked
                onChange={this.radioChange.bind(this)}
              />
              男
              <input
                type="radio"
                name="sex"
                value="women"
                onChange={this.radioChange.bind(this)}
              />
              女
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
